<template>
  <t-modal :title="title" :width="650" :visible="visible" :footer="null" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
    <div style="display: flex;justify-content: space-around;">
      <div class="card-item" @click="cardClick('static')">
        <div class="img-box">
          <img src="~@/assets/img/report01.png"/>
        </div>
        <div class="text-box">
          <div class="title">静态数据</div>
          <div class="text">静态数据</div>
        </div>
      </div>
      <div class="card-item" @click="cardClick('apiData')">
        <div class="img-box">
          <img src="~@/assets/img/report02.png"/>
        </div>
        <div class="text-box">
          <div class="title">API接口数据</div>
          <div class="text">API接口数据</div>
        </div>
      </div>
      <div class="card-item" @click="cardClick('dataBaseData')">
        <div class="img-box">
          <img src="~@/assets/img/report02.png"/>
        </div>
        <div class="text-box">
          <div class="title">SQL数据库数据</div>
          <div class="text">SQL数据库数据</div>
        </div>
      </div>
      <!--<div class="card-item" @click="cardClick('createTemplate')">-->
        <!--<div class="img-box">-->
          <!--<img src="~@/assets/img/report02.png"/>-->
        <!--</div>-->
        <!--<div class="text-box">-->
          <!--<div class="title">WebSocket</div>-->
          <!--<div class="text">WebSocket</div>-->
        <!--</div>-->
      <!--</div>-->
    </div>
    <div class="text-center text-bold margin-top-sm">
      <a-tooltip placement="topLeft">
        <!-- <template slot="title">
          <span>{{$ct("BeCreateFromBank","基于空白开始创建")}}、{{$ct("BeCreateFromTemplate","基于模板开始创建")}}</span>
        </template> -->
        <span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
      </a-tooltip>
    </div>
  </t-modal>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
    },
    data() {
      return {
        title: this.$ct('FormPreview', '表单预览')
      };
    },
    created() {

    },
    methods: {
      cardClick(e) {
        this.$emit("click", e)
      }
    }
  };
</script>
<style lang="less" scoped>
  .card-item {
    transition: 0.3s all;
    cursor: pointer;
    width: 181px;
    border: 1px solid #F0F2F5;
    border-radius: 10px;
    padding-bottom: 15px;
    .img-box {
      padding: 40px 20px 20px;
      img {
        width: 100%;
      }
    }
  }

  .card-item:hover {
    transform: scale(1.02);
    border: 1px solid #1890ff;
    box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
  }

  .text-box {
    text-align: center;
    .title {
      font-size: 16px;
      color: #171a1d;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .text {
      font-size: 12px;
      color: rgb(206 206 206);
    }
  }

</style>
